<template>
    <div class="shopIndexBox mainContentArea">
        <div class="topBox">
            <div class="titleLine flex justify-between align-center">
                <div class="leftArea"><span class="t">店铺概况</span></div>
            </div>
            <div class="topContentBox flex">
                <ul class="dataBox flex flex-wrap">
                    <li class="dataItem" @click="$router.push({ name: 'shop_today' })">
                        <div class="itemLabel flex align-center">
                            <!-- 今日新增 -->
                            今日新增
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.today_add_count : 0 }}</div>
                    </li>
                    <li class="dataItem" @click="$router.push({ name: 'shop_register' })">
                        <div class="itemLabel flex align-center">
                            <!-- 今日注册 -->
                            今日注册
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.today_register_count : 0 }}
                        </div>
                    </li>
                    <li class="dataItem" @click="$router.push({ name: 'shop_closed' })">
                        <div class="itemLabel flex align-center">
                            <!-- 已关闭店铺 -->
                            已关闭店铺
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.close_count : 0 }}</div>
                    </li>
                    <li class="dataItem" @click="$router.push({ name: 'shop_focus' })">
                        <div class="itemLabel flex align-center">
                            <!-- 关注店铺 -->
                            关注店铺
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.favorites_count : 0 }}</div>
                    </li>
                    <li class="dataItem" @click="toStoreOverview(8)">
                        <div class="itemLabel flex align-center">
                            <!-- 总店铺数 -->
                            总店铺数
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.store_count : 0 }}</div>
                    </li>
                    <li class="dataItem" @click="toStoreOverview(7)">
                        <div class="itemLabel flex align-center">
                            <!-- 在线店铺 -->
                            在线店铺
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.store_online_count : 0 }}</div>
                    </li>
                    <li class="dataItem" @click="toStoreOverview(6)">
                        <div class="itemLabel flex align-center">
                            <!-- 待审核店铺 -->
                            待审核店铺
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.check_count : 0 }}</div>
                    </li>
                    <li class="dataItem" @click="toStoreOverview(9)">
                        <div class="itemLabel flex align-center">
                            <!-- 违规店铺 -->
                            违规店铺
                            <img class="icon" src="@/assets/ic_more6.png" alt="">
                        </div>
                        <div class="itemValue">{{ Object.keys(topInfo).length ? topInfo.forzen_count : 0 }}</div>
                    </li>
                </ul>
                <div class="echartBox" id="echartBox">
                </div>
            </div>
        </div>
        <div class="midBox flex">
            <div class="leftBox">
                <div class="rankBox">
                    <div class="titleLine flex justify-between align-center">
                        <div class="leftArea"><span class="t">店铺排行</span><span class="subtitle">（更新时间 {{
                            $common.timeSet(new Date().getTime() / 1000)
                        }}）</span></div>
                        <div class="rightArea flex align-center"
                            @click="$router.push({ name: 'shop_rank', params: { type: rankType } })">
                            查看更多
                            <img class="moreIcon imgD" src="@/assets/ic_more5.png" alt="">
                            <img class="moreIcon imgH" src="@/assets/ic_next.png" alt="">
                        </div>
                    </div>
                    <ul class="shopList">
                        <li class="shopItem flex align-center" v-for="(item, index) of storeRankList">
                            <img class="rankIcon" :src="require('@/assets/goods/ic_t' + (index + 1) + '.png')" />
                            <div class="shopInfo flex align-center">
                                <img class="logo" :src="item.store_avatar" alt="">
                                <div class="shopDetail">
                                    <div class="name flex align-center">
                                        <span @click="$common.toDetailPage({ type: 'store', id: item.store_id })">{{
                                            item.store_name
                                        }}</span>
                                        <div class="shopState flex align-center"
                                            :class="{ close: item.store_state != 1 }">{{
                                                item.store_state == 0 ? '关闭' :
                                                    item.store_state == 1 ? '开启' : item.store_state == 4 ? '注销' : '待审核'
                                            }}
                                        </div>
                                    </div>
                                    <div class="leave">
                                        店铺ID:{{ item.storer_sn }}
                                    </div>
                                </div>

                            </div>
                            <ul class="shopValue flex">
                                <li class="valueItem flex flex-wrap align-center split">
                                    <div class="value b">{{ item.rank_count2 }}<span class="small">.00</span></div>
                                    <div class="valueLabel">销售收入({{ $store.state.unit }})</div>
                                </li>
                                <li class="valueItem flex flex-wrap align-center">
                                    <div class="value o">{{ item.rank_count }}</div>
                                    <div class="valueLabel">店铺订单量</div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="changeBox flex justify-center align-center">
                        <div class="il">
                            <img class="img1" src="@/assets/goods/ic_leftBtn2.png" @click="changeRankType(-1)" />
                            <img class="img2" src="@/assets/goods/ic_leftBtn.png" @click="changeRankType(-1)" />
                        </div>
                        <div :class="[$store.state.Language == 'en' ? 'moreWidth' : '']">
                            {{ rankType == 1 ? '店铺订单量' : '销售收入'}}
                        </div>
                        <div class="il">
                            <img class="img1" src="@/assets/goods/ic_rightBtn2.png" @click="changeRankType(1)" />
                            <img class="img2" src="@/assets/goods/ic_rightBtn.png" @click="changeRankType(1)" />
                        </div>
                    </div>
                </div>
                <div class="depositBox">
                    <div class="titleLine flex justify-between align-center">
                        <div class="leftArea"><span class="t">店铺保证金</span></div>
                        <div class="rightArea flex align-center" @click="$router.push({ name: 'shopMargin' })">
                            查看更多
                            <img class="moreIcon imgD" src="@/assets/ic_more5.png" alt="">
                            <img class="moreIcon imgH" src="@/assets/ic_next.png" alt="">
                        </div>
                    </div>
                    <div class="typeList flex">
                        <div class="changeBtn flex justify-center align-center l" @click="changeClass(-1)">
                            <img class="imgD" src="@/assets/goods/ic_mxl.png" alt="">
                            <img class="imgH" src="@/assets/goods/ic_mxl_h.png" alt="">
                        </div>
                        <div class="changeBtn flex justify-center align-center r" @click="changeClass(1)">
                            <img class="imgD" src="@/assets/goods/ic_mxr.png" alt="">
                            <img class="imgH" src="@/assets/goods/ic_mxr_h.png" alt="">
                        </div>
                        <div class="typeItem" v-for="item of class_list">
                            <div class="typeInfo flex align-center">
                                <img class="typeIcon" :src="item.gc_image_check" alt="">
                                <div class="typeName">{{ item.gc_name }}</div>
                                <div class="editIcon" @click="setMargin(item)">
                                    <img class="imgD" src="@/assets/shop/ic_edit.png" alt="">
                                    <img class="imgH" src="@/assets/shop/ic_edit_h.png" alt="">
                                </div>
                            </div>
                            <div class="typeValue flex align-center">
                                保证金数额<span class="num">{{ $store.state.unit }}{{ item.margin }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightBox">
                <div class="searchBox">
                    <div class="titleLine flex justify-between align-center">
                        <div class="leftArea"><span class="t">店铺搜索</span></div>
                    </div>
                    <div class="searchTextBox flex">
                        <mInput style="width:400px;height:40px;margin-right: 10px;" v-model="seach_code"
                            :placeholder="'请输入店铺ID/店铺名'">
                            <template #leftBox>
                                <img class="searchIcon" src="@/assets/ic_search4.png" />
                            </template>
                        </mInput>
                        <btn style="width:120px;height:40px;margin-right: 10px;" :text="'查询'" @click="searchStore" />
                        <btn style="width:120px;height:40px" :text="'更多搜索结果'" :type="3" @click="toMoreSearch" />
                    </div>
                    <div class="searchResult">
                        <div class="emptyBox flex justify-center align-center" v-if="searchList.length == 0">
                            <img src="@/assets/goods/ic_goods_search.png" />
                            <div v-if="searState">没有搜索到店铺</div>
                            <div v-else>店铺搜索结果</div>
                        </div>
                        <template v-else>
                            <div class="resultItem flex align-center" v-for="item in searchList">
                                <img class="logo" :src="item.store_avatar_url" alt="">
                                <div class="shopDetail">
                                    <div class="name flex align-center">
                                        {{ item.store_name }}<div class="shopState flex align-center"
                                            :class="{ close: item.store_state != 1 }">{{
                                                item.store_state == 0 ? '关闭' :
                                                    item.store_state == 1 ? '开启' : item.store_state == 4 ? '注销' : '待审核'
                                            }}</div>
                                    </div>
                                    <div class="leave">
                                        店铺ID:{{ item.storer_sn }}
                                    </div>
                                </div>
                                <div class="opBox">
                                    <btn style="margin-bottom:4px" :text="'查看'"
                                        @click="$common.toDetailPage({ type: 'store', id: item.store_id })" />
                                    <btn v-if="item.store_state == 1" :text="'更多操作'" :type="3" :has_down="true"
                                        style="color:#8A94A6" @checkMore="setStoreState"
                                        :moreList="[{ id: 1, text: '违规下架' }, { id: 2, text: '违规冻结' }, { id: 3, text: '永久关闭' }]" />
                                </div>

                            </div>
                        </template>

                    </div>
                </div>
                <div class="shopDataBox">
                    <div class="titleLine flex justify-between align-center">
                        <div class="leftArea"><span class="t">店铺数据</span><span class="subtitle">（更新时间 {{
                            $common.timeSet(new Date().getTime() / 1000)
                        }}）</span></div>
                        <div class="rightArea flex align-center" @click="$router.push({ name: 'shop_data' })">
                            查看更多
                            <img class="moreIcon imgD" src="@/assets/ic_more5.png" alt="">
                            <img class="moreIcon imgH" src="@/assets/ic_next.png" alt="">
                        </div>
                    </div>
                    <ul class="dataListBox">
                        <li class="dataItem flex justify-between">
                            <div class="flex justify-start align-center">
                                <img class="dataIcon" src="@/assets/goods/ic_data1.png" />
                                <div class="dataNum">
                                    <div>店铺浏览量</div>
                                    <div>{{
                                        Object.keys(allStoreData).length ? allStoreData.behavior_count.today_count * 1 :
                                            0
                                    }}</div>
                                </div>
                            </div>
                            <div class="percentage flex justify-end align-center">
                                <div>对比昨天</div>
                                <div :class="[
                                    parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_count.rate : 0) > 0
                                        ? '_green'
                                        : parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_count.rate : 0) < 0
                                            ? '_oringe'
                                            : '',
                                ]">
                                    {{
                                        Object.keys(allStoreData).length ? Math.abs(allStoreData.behavior_count.rate) : 0
                                    }}%
                                </div>
                                <img v-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_count.rate : 0) > 0"
                                    src="@/assets/goods/ic_s.png" />
                                <img v-else-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_count.rate : 0) < 0"
                                    src="@/assets/goods/ic_x.png" />
                                <img v-else src="@/assets/goods/ic_p.png" />
                            </div>
                        </li>
                        <li class="dataItem flex justify-between">
                            <div class="flex justify-start align-center">
                                <img class="dataIcon" src="@/assets/goods/ic_data2.png" />
                                <div class="dataNum">
                                    <div>店铺访客数</div>
                                    <div>{{
                                        Object.keys(allStoreData).length ?
                                            allStoreData.behavior_member_count.today_count * 1 : 0
                                    }}</div>
                                </div>
                            </div>
                            <div class="percentage flex justify-end align-center">
                                <div>对比昨天</div>
                                <div :class="[
                                    parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_member_count.rate : 0) > 0
                                        ? '_green'
                                        : parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_member_count.rate : 0) < 0
                                            ? '_oringe'
                                            : '',
                                ]">
                                    {{
                                        Object.keys(allStoreData).length ?
                                            Math.abs(allStoreData.behavior_member_count.rate) : 0
                                    }}%
                                </div>
                                <img v-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_member_count.rate : 0) > 0"
                                    src="@/assets/goods/ic_s.png" />
                                <img v-else-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.behavior_member_count.rate : 0) < 0"
                                    src="@/assets/goods/ic_x.png" />
                                <img v-else src="@/assets/goods/ic_p.png" />
                            </div>
                        </li>
                        <li class="dataItem flex justify-between">
                            <div class="flex justify-start align-center">
                                <img class="dataIcon" src="@/assets/goods/ic_data3.png" />
                                <div class="dataNum">
                                    <div>支付商品</div>
                                    <div>{{
                                        Object.keys(allStoreData).length ? allStoreData.pay_goods_count.today_count
                                            * 1 : 0
                                    }}
                                    </div>
                                </div>
                            </div>
                            <div class="percentage flex justify-end align-center">
                                <div>对比昨天</div>
                                <div :class="[
                                    parseFloat(Object.keys(allStoreData).length ? allStoreData.pay_goods_count.rate : 0) > 0
                                        ? '_green'
                                        : parseFloat(Object.keys(allStoreData).length ? allStoreData.pay_goods_count.rate : 0) < 0
                                            ? '_oringe'
                                            : '',
                                ]">
                                    {{
                                        Object.keys(allStoreData).length ? Math.abs(allStoreData.pay_goods_count.rate) : 0
                                    }}%
                                </div>
                                <img v-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.pay_goods_count.rate : 0) > 0"
                                    src="@/assets/goods/ic_s.png" />
                                <img v-else-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.pay_goods_count.rate : 0) < 0"
                                    src="@/assets/goods/ic_x.png" />
                                <img v-else src="@/assets/goods/ic_p.png" />
                            </div>
                        </li>
                        <li class="dataItem flex justify-between">
                            <div class="flex justify-start align-center">
                                <img class="dataIcon" src="@/assets/goods/ic_data4.png" />
                                <div class="dataNum">
                                    <div>支付金额</div>
                                    <div>{{ $store.state.unit }}{{
                                        Object.keys(allStoreData).length ? allStoreData.order_amount.today_count : 0
                                    }}
                                    </div>
                                </div>
                            </div>
                            <div class="percentage flex justify-end align-center">
                                <div>对比昨天</div>
                                <div :class="[
                                    parseFloat(Object.keys(allStoreData).length ? allStoreData.order_amount.rate : 0) > 0
                                        ? '_green'
                                        : parseFloat(Object.keys(allStoreData).length ? allStoreData.order_amount.rate : 0) < 0
                                            ? '_oringe'
                                            : '',
                                ]">
                                    {{
                                        Object.keys(allStoreData).length ? Math.abs(allStoreData.order_amount.rate) : 0
                                    }}%
                                </div>
                                <img v-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.order_amount.rate : 0) > 0"
                                    src="@/assets/goods/ic_s.png" />
                                <img v-else-if="parseFloat(Object.keys(allStoreData).length ? allStoreData.order_amount.rate : 0) < 0"
                                    src="@/assets/goods/ic_x.png" />
                                <img v-else src="@/assets/goods/ic_p.png" />
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <div class="titleLine flex justify-between align-center">
                <div class="leftArea"><span class="t">店铺质量</span></div>
                <div class="rightArea flex align-center" @click="toRaring(5)">
                    查看更多
                    <img class="moreIcon imgD" src="@/assets/ic_more5.png" alt="">
                    <img class="moreIcon imgH" src="@/assets/ic_next.png" alt="">
                </div>
            </div>
            <ul class="scoreList flex">
                <li class="scoreItem" @click="toRaring(5)">
                    <div class="label flex align-center">评价极好
                        <operateIcon />
                    </div>
                    <div class="scoreVlaue">{{ Object.keys(scoreList).length ? scoreList.store_avg_score5 : 0 }}</div>
                </li>
                <li class="scoreItem" @click="toRaring(4)">
                    <div class="label flex align-center">评价优秀
                        <operateIcon />
                    </div>
                    <div class="scoreVlaue">{{ Object.keys(scoreList).length ? scoreList.store_avg_score4 : 0 }}</div>
                </li>
                <li class="scoreItem" @click="toRaring(3)">
                    <div class="label flex align-center">评价良好
                        <operateIcon />
                    </div>
                    <div class="scoreVlaue">{{ Object.keys(scoreList).length ? scoreList.store_avg_score3 : 0 }}</div>
                </li>
                <li class="scoreItem" @click="toRaring(2)">
                    <div class="label flex align-center">评价较差
                        <operateIcon />
                    </div>
                    <div class="scoreVlaue">{{ Object.keys(scoreList).length ? scoreList.store_avg_score2 : 0 }}</div>
                </li>
                <li class="scoreItem" @click="toRaring(1)">
                    <div class="label flex align-center">评价差
                        <operateIcon />
                    </div>
                    <div class="scoreVlaue">{{ Object.keys(scoreList).length ? scoreList.store_avg_score1 : 0 }}</div>
                </li>
            </ul>
        </div>

        <!-- 新增商品分类保证金/编辑类目保证金 -->
        <modelBox :title="$t('marginSet.m4') + '-' + editItem.gc_name
        " ref="setMarginBox">
            <template #content>
                <div class="contentBox">
                    <!-- 保证金数额 -->
                    <p class="title">{{ $t('marginSet.m6') }}({{ $store.state.unit }})</p>
                    <mInput v-model="margin" inputType="num" style="width: 100%; margin-bottom: 20px" />
                    <div class="flex justify-end">
                        <!-- 确定 -->
                        <btn :text="$t('marginSet.m7')" style="margin-right: 20px" @click="submitSet" />
                        <!-- 取消 -->
                        <btn @click="$refs.setMarginBox.close()" :type="2" :text="$t('marginSet.m8')" />
                    </div>
                </div>
            </template>
        </modelBox>
        <popup_violation ref="popup_violation" @upData="searchStore" />
        <popup_violation :type='2' ref="popup_freeze" @upData="searchStore" />
        <hintBox :type="2" ref="closeHint" :title="'永久关闭'" :hintTitle="'确定永久关闭该店铺吗？'"
            :hintContent="'请确认是否永久关闭该店铺，如确认请点击同意，如有疑议，请点击取消或拒绝！'" :submitText="'同意'" :closeText="'拒绝'"
            @submit="closeShop" />
    </div>
</template>
<script>
import popup_violation from './popup/popup_violation'

export default {
    name: 'shopIndex',
    components: {
        popup_violation
    },
    data() {
        return {
            topInfo: {},
            storeRankList: [],
            rankType: 2,//1:订单量，2：销售收入榜
            class_list: [],//保证金分类列表
            classPage: 1,//保证金页码
            total_class_page: 1,//保证金总页码
            margin: '',//保证金金额
            editItem: {},//编辑的保证金数据
            allStoreData: {},//所有店铺数据
            scoreList: {},//店铺质量
            seach_code: '',
            searState: false,
            searchList: [],
        }
    },
    mounted() {
        this.getInfo()
        this.getStoreDataEchart()
        this.getAllStoreData()
        this.getRankList()
        this.getClassMargin()
        this.getShopScore()


        this.$store.state.kpAliverRouter = [
            'shopIndex',
            'shop_today',
            'shop_register',
            'shop_closed',
            'shop_focus',
            'shop_overview',
            'shop_rank',
            'shop_more_search',
            'shop_data',
            'shopMargin',
            'shop_rating',
            'shopDetail',
            'shop_all_goods',
            'shop_sales_list',
            'fundsDetail',
            'shopAudit',
        ]

    },
    activated() {
        this.$store.state.kpAliverRouter = [
            'shopIndex',
            'shop_today',
            'shop_register',
            'shop_closed',
            'shop_focus',
            'shop_overview',
            'shop_rank',
            'shop_more_search',
            'shop_data',
            'shopMargin',
            'shop_rating',
            'shopDetail',
            'shop_all_goods',
            'shop_sales_list',
            'fundsDetail',
            'shopAudit',
        ]

    },
    methods: {
        //获取店铺概况
        getInfo() {
            this.$axios({
                url: 'store_head_stat',
            }).then(res => {
                this.topInfo = res
            })
        },
        //店铺数据图表
        getStoreDataEchart() {
            this.$axios({
                url: 'store_data_chart',
                data: {
                    is_time_type: 1,
                    time_type: 7,
                    type: 5
                }
            }).then(res => {
                var xA = []
                var ser = []
                for (var i in res.time_list) {
                    xA.push(this.$common.timeSet(res.time_list[i], 'hh:mm'))
                }
                // 自定义
                ser = [{ name: '今日支付金额', data: res.value }, { name: '昨日', data: res.last_value }]
                var obj = {
                    ser: ser,
                    xA: xA,
                    color: ['#407CFF', '#BEC0CB'],
                    grid: {
                        containLabel: true,
                        left: "20px",
                        bottom: 2,
                        right: "20px",
                        top: "72px",
                    },
                }
                this.$nextTick(() => {
                    this.$common.initEcharts(obj.ser, obj.xA, obj.color, 'echartBox', obj.grid, -1, 3, 1, 2, [
                        {
                            offset: 0,
                            color: 'rgba(210,224,255)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255)'
                        }
                    ])
                })
            })
        },
        setEchartsData(res, list) {
            var oKRc = Object.keys(res)//曲线对象名
            var ovRc = Object.values(res)//曲线对象值
            for (var dd in list) {
                //曲线循环判断获取
                for (var d in oKRc) {
                    if (list[dd].sn == oKRc[d]) {
                        list[dd].goods_count = ovRc[d].goods_count
                        list[dd].store_count = ovRc[d].store_count
                        if (list[dd].sn == 'favorites_goods') {
                            list[dd].fav_id = ovRc[d].fav_id
                        }
                    }
                }
            }
        },
        // 店铺排行列表
        getRankList() {
            this.$axios({
                url: 'store_rank_list',
                data: {
                    type: this.rankType,
                    pagesize: 3,
                    is_time_type: 1,
                    time_type: 6
                }
            }).then(res => {
                this.storeRankList = res.list
            })
        },
        //切换排行版类型
        changeRankType(e) {
            if (this.rankType == 1 && e == -1) {
                this.rankType = 2
            } else if (this.rankType == 2 && e == 1) {
                this.rankType = 1
            } else {
                this.rankType = this.rankType + e
            }

            this.getRankList()
        },
        //保证金
        getClassMargin() {
            return new Promise(resolve => {
                this.$axios({
                    url: 'get_goodsclass_margin',
                    data: {
                        page: this.classPage,
                        pagesize: 3
                    }
                }).then(res => {
                    this.class_list = res.tmp_list
                    this.total_class_page = res.page_total
                })
            })

        },
        //切换分类列表
        changeClass(e) {
            if (e == -1 && this.classPage != 1) {
                this.classPage--
                this.getClassMargin()
            } else if (e == 1 && this.classPage != this.total_class_page) {
                this.classPage++
                this.getClassMargin()
            }
        },
        //编辑保证金
        setMargin(item) {
            this.editItem = item
            this.margin = item.margin
            this.$refs.setMarginBox.open()
        },
        //提交保证金金额修改
        submitSet() {
            if (this.margin == '') {
                this.$message.warning(this.$t('marginSet.m9'))
                return
            } else {
                this.$axios({
                    url: 'edit_goodsclass_margin',
                    data: {
                        gc_id: this.editItem.gc_id,
                        margin: this.margin
                    }
                }).then(res => {
                    this.$message.success(this.$t('marginSet.m10'))
                    this.$refs.setMarginBox.close()
                    this.editItem.margin = this.margin
                    this.margin = ''
                })
            }
        },
        //店铺数据
        getAllStoreData() {
            this.$axios({
                url: 'store_data_stat',
                data: {
                    is_time_type: 1,
                    time_type: 7,
                }
            }).then(res => {
                this.allStoreData = res
            })
        },
        //店铺质量
        getShopScore() {
            this.$axios({
                url: 'store_class_head_child_stat',
                data: {
                    type: 6
                }
            }).then(res => {
                this.scoreList = res
            })
        },
        //搜索店铺
        searchStore() {
            if (this.seach_code == '') {
                this.$message.warning(this.$t('goods.goodsIndex.g2'))
                return
            }
            this.searState = true
            this.$axios({
                url: 'store_list',
                data: {
                    seach_code: this.seach_code,
                    pagesize: 1,
                    page: 1,
                }
            }).then(res => {
                this.searchList = res.store_list
            })
        },
        //去更多搜索页面
        toMoreSearch() {
            if (this.searState) {
                this.$router.push({ name: 'shop_more_search', params: { searchContent: this.seach_code } })
            }
        },
        //设置店铺状态
        setStoreState(e) {
            console.log(e)
            if (e.id == 1) {//违规下架
                this.$refs.popup_violation.open(this.searchList[0].store_id)
            } else if (e.id == 2) {//冻结
                this.$refs.popup_freeze.open(this.searchList[0].store_id)
            } else if (e.id == 3) {
                this.$refs.closeHint.open(this.searchList[0].store_id)
            }
        },
        closeShop(e) {
            this.$refs.closeHint.close()
            this.$axios({
                url: "forzen_store",
                data: {
                    store_id: e,
                    forzen_time: 2,
                    store_close_info: '',
                },
            }).then((res) => {
                this.$message.success('店铺关闭成功'); //店铺关闭成功
                this.searchStore()
            });
        },
        //去店铺数据页面
        toStoreOverview(type) {
            this.$router.push({ name: 'shop_overview', params: { type: type } })
        },
        //去店铺质量页面
        toRaring(type) {
            this.$router.push({ name: 'shop_rating', params: { type: type } })
        }
    }
}   
</script>
<style lang="scss" scoped>
.shopIndexBox {
    margin-bottom: 10px;

    .titleLine {
        height: 28px;
        margin-bottom: 20px;

        .leftArea {
            .t {
                font-size: 20px;
                @include fontBold;
                color: $textColor3;
            }

            .subtitle {
                font-size: 12px;
                color: $textColor9;
            }
        }

        .rightArea {
            height: 20px;
            font-size: 14px;
            color: $textColor11;
            @include hover('img');
            @include hover('def_text');

            .moreIcon {
                width: 16px;
                height: 16px;
                margin-left: 4px;
            }
        }


    }

    .topBox {
        background: $bgColor4;
        border-radius: $br3;
        padding: 20px;
        margin-bottom: 10px;

        .topContentBox {
            .dataBox {
                flex-grow: 1;
                margin-right: 10px;

                .dataItem {
                    width: calc((100% - 30px)/4);
                    height: 120px;
                    border: 1px solid $borderColor;
                    border-radius: $br3;
                    padding: 30px 20px;
                    margin-right: 10px;
                    margin-bottom: 10px;

                    .itemLabel {
                        height: 22px;
                        font-size: 16px;
                        @include fontBold;
                        color: $textColor3;
                        margin-bottom: 10px;

                        .icon {
                            visibility: hidden;
                            width: 14px;
                            height: 14px;
                            margin-left: 10px;
                        }
                    }

                    .itemValue {
                        font-size: 24px;
                        @include price;
                        color: $textColor3;
                    }

                    &:hover {
                        cursor: pointer;
                        border: 2px solid $themeColor;
                        padding: 29px 19px;

                        .itemLabel {
                            color: $themeColor;

                            .icon {
                                visibility: visible;
                            }
                        }

                        .itemValue {
                            color: $themeColor;
                        }
                    }
                }

                &>.dataItem:nth-child(4n) {
                    margin-right: 0;
                }

                &>.dataItem:nth-child(n+4) {
                    margin-bottom: 0;
                }
            }

            .echartBox {
                flex-shrink: 0;
                width: 680px;
                height: 250px;
                background: $bgColor6;
                border-radius: $br3;
            }
        }


    }

    .midBox {
        margin-bottom: 10px;

        .leftBox {
            width: calc(100% - 680px - 20px - 10px);
            margin-right: 10px;

            .rankBox {
                width: 100%;
                height: 418px;
                border-radius: $br3;
                background: $bgColor4;
                margin-bottom: 10px;
                padding: 20px 20px 0;

                .shopList {
                    height: 302px;
                    border-top: 1px solid $borderColor ;
                    border-bottom: 1px solid $borderColor ;

                    .shopItem {
                        width: 100%;
                        height: 100px;
                        border-bottom: 1px solid $borderColor ;
                        padding: 10px 0;

                        .rankIcon {
                            width: 28px;
                            height: 28px;
                            margin-right: 11px;
                        }

                        .shopInfo {
                            flex-grow: 1;

                            .logo {
                                width: 56px;
                                height: 56px;
                                border: 1px solid $borderColor;
                                border-radius: 50%;
                                margin-right: 10px;
                            }

                            .shopDetail {
                                padding-top: 7px;

                                .name {
                                    height: 20px;
                                    font-size: 14px;
                                    @include fontBold;
                                    color: $textColor3;
                                    margin-bottom: 4px;

                                    &>span {
                                        @include hover('def_text')
                                    }

                                    .shopState {
                                        font-size: 12px;
                                        color: $textColor9;
                                        position: relative;
                                        margin-left: 10px;

                                        &::before {
                                            content: '';
                                            display: block;
                                            width: 8px;
                                            height: 8px;
                                            border-radius: 50%;
                                            background: $themeColor;
                                            margin-right: 5px;
                                        }

                                        &.close {
                                            &::before {
                                                content: '';
                                                display: block;
                                                width: 8px;
                                                height: 8px;
                                                border-radius: 50%;
                                                background: #FF6632FF;
                                                margin-right: 5px;
                                            }
                                        }
                                    }
                                }

                                .leave {
                                    height: 17px;
                                    line-height: 17px;
                                    font-size: 12px;
                                    color: $textColor9;
                                }
                            }


                        }

                        .shopValue {
                            width: 470px;
                            height: 80px;
                            background: #F9FAFC;
                            border-radius: $br3;

                            .valueItem {
                                width: 50%;
                                padding: 17px 20px;
                                position: relative;

                                .value {
                                    width: 100%;
                                    height: 28px;
                                    line-height: 28px;
                                    font-size: 22px;
                                    @include price;

                                    .small {
                                        font-size: 16px;
                                    }
                                }

                                .valueLabel {
                                    width: 100%;
                                    height: 17px;
                                    line-height: 17px;
                                    font-size: 12px;
                                    color: $textColor3;
                                }

                                .b {
                                    color: $themeColor;
                                }

                                .o {
                                    color: #FF6632FF;
                                }

                                &.split {
                                    &::after {
                                        content: '';
                                        display: block;
                                        width: 1px;
                                        height: 32px;
                                        background: $borderColor;
                                        position: absolute;
                                        top: 50%;
                                        right: 0;
                                        transform: translateY(-50%);
                                    }
                                }

                            }
                        }

                    }

                    &>.shopItem:nth-child(3) {
                        border-bottom: none;
                    }
                }

                .changeBox {
                    height: 48px;

                    &>.il,
                    &>.ir {
                        width: 13px;
                        height: 15px;
                        cursor: pointer;

                        // background: #407cff;
                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .img2 {
                            display: none;
                        }

                        .img1 {
                            display: block;
                        }

                        &:hover {
                            .img1 {
                                display: none;
                            }

                            .img2 {
                                display: block;
                            }
                        }
                    }

                    &>div {
                        height: 20px;
                        line-height: 20px;
                        font-size: 14px;
                        color: $textColor3;
                        margin: 0 10px;
                        width: 74px;
                        text-align: center;

                        &.moreWidth {
                            width: 172px;
                        }
                    }
                }
            }

            .depositBox {
                width: 100%;
                height: 218px;
                background: $bgColor4;
                border-radius: $br3;
                padding: 20px;

                .typeList {
                    width: 100%;
                    height: 130px;
                    position: relative;

                    .changeBtn {
                        width: 30px;
                        height: 30px;
                        position: absolute;
                        top: 50px;
                        background: white;
                        border-radius: 50%;
                        cursor: pointer;
                        box-shadow: 0px 4px 12px 1px rgba(69, 71, 81, 0.1);
                        @include hover('img');

                        img {
                            width: 16px;
                            height: 16px;
                        }

                        &.l {
                            left: -15px;
                        }

                        &.r {
                            right: -15px;
                        }
                    }

                    .typeItem {
                        width: calc((100% - 20px)/3);
                        height: 130px;
                        background: $bgColor4;
                        border-radius: $br3;
                        border: 1px solid $borderColor;
                        padding: 26px 20px;
                        margin-right: 10px;

                        .typeInfo {
                            height: 40px;
                            margin-bottom: 12px;

                            .typeIcon {
                                flex-shrink: 0;
                                width: 40px;
                                height: 40px;
                                margin-right: 10px;
                            }

                            .typeName {
                                flex-grow: 1;
                                overflow: hidden;
                                height: 20px;
                                line-height: 20px;
                                font-size: 14px;
                                @include fontBold;
                                color: $textColor3;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }

                            .editIcon {
                                width: 24px;
                                height: 24px;
                                @include hover('img');

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }

                        .typeValue {
                            width: 100%;
                            height: 29px;
                            font-size: 14px;
                            color: $textColor9;

                            .num {
                                @include price;
                                color: $themeColor;
                                margin-left: 10px;
                                font-size: 24px;
                            }
                        }
                    }

                    &>.typeItem:nth-child(5n) {
                        margin-right: 0;
                    }
                }
            }
        }

        .rightBox {
            width: 700px;

            .searchBox {
                width: 100%;
                height: 230px;
                background: $bgColor4;
                border-radius: $br3;
                padding: 20px;
                margin-bottom: 10px;

                .searchIcon {
                    width: 40px;
                    height: 40px;
                }

                .searchTextBox {
                    height: 40px;
                    margin-bottom: 10px;

                    &::v-deep {
                        .inputContainer {
                            input {
                                padding-left: 0;
                            }
                        }
                    }
                }

                .searchResult {
                    width: 100%;
                    height: 102px;
                    background: $bgColor6;
                    border-radius: $br3;

                    .emptyBox {
                        width: 100%;
                        height: 102px;
                        background: #f9fafc;
                        border-radius: 4px;
                        margin-top: 10px;

                        &>img {
                            width: 40px;
                            height: 40px;
                        }

                        &>div {
                            height: 20px;
                            font-size: 14px;
                            color: #8a94a6;
                            line-height: 20px;
                            margin-left: 10px;
                        }
                    }

                    .resultItem {
                        padding: 17px 20px;

                        .logo {
                            width: 56px;
                            height: 56px;
                            border: 1px solid $borderColor;
                            border-radius: 50%;
                            margin-right: 10px;
                        }

                        .shopDetail {
                            flex-grow: 1;
                            padding-top: 7px;

                            .name {
                                height: 20px;
                                font-size: 14px;
                                @include fontBold;
                                color: $textColor3;
                                margin-bottom: 4px;

                                .shopState {
                                    font-size: 12px;
                                    color: $textColor9;
                                    position: relative;
                                    margin-left: 10px;

                                    &::before {
                                        content: '';
                                        display: block;
                                        width: 8px;
                                        height: 8px;
                                        border-radius: 50%;
                                        background: $themeColor;
                                        margin-right: 5px;
                                    }

                                    &.close {
                                        &::before {
                                            content: '';
                                            display: block;
                                            width: 8px;
                                            height: 8px;
                                            border-radius: 50%;
                                            background: #FF6632FF;
                                            margin-right: 5px;
                                        }
                                    }
                                }
                            }

                            .leave {
                                height: 17px;
                                line-height: 17px;
                                font-size: 12px;
                                color: $textColor9;
                            }
                        }

                        .opBox {
                            width: 102px;
                        }


                    }
                }
            }

            .shopDataBox {
                width: 100%;
                height: 406px;
                background: $bgColor4;
                border-radius: $br3;
                padding: 20px;


                .dataListBox {
                    border-top: 1px solid $borderColor;
                    padding-top: 27px;

                    .dataItem {
                        margin-bottom: 34px;

                        .dataIcon {
                            width: 48px;
                            height: 48px;
                            margin-right: 20px;
                        }

                        .dataNum {
                            &>div {
                                height: 20px;
                                line-height: 20px;
                                @include fontBold;
                                color: $textColor3;
                            }

                            &>div:nth-of-type(1) {
                                margin-bottom: 8px;
                                font-size: 14px;
                            }

                            &>div:nth-of-type(2) {
                                font-size: 20px;
                                @include price;
                            }
                        }

                        .percentage {
                            height: 17px;

                            &>div {
                                height: 17px;
                                line-height: 17px;
                                font-size: 12px;
                                margin-right: 4px;
                                color: $textColor9;
                            }

                            &>div:nth-of-type(1) {
                                color: #8a94a6;
                            }

                            &>._green {
                                color: #53dba0;
                            }

                            &>._oringe {
                                color: #ff6632;
                            }

                            &>img {
                                width: 12px;
                                height: 12px;
                            }
                        }
                    }
                }
            }



        }
    }

    .bottomBox {
        width: 100%;
        height: 218px;
        background: $bgColor4;
        border-radius: $br3;
        padding: 20px;

        .scoreList {
            .scoreItem {
                width: calc((100% - 40px)/5);
                height: 130px;
                background: $bgColor6;
                border-radius: $br3;
                margin-right: 10px;
                padding: 35px 30px;

                .label {
                    height: 22px;
                    font-size: 16px;
                    @include fontBold;
                    color: $textColor3;
                    margin-bottom: 10px;
                }

                .scoreVlaue {
                    height: 29px;
                    line-height: 29px;
                    font-size: 24px;
                    @include price;
                    color: $textColor3;
                }

                &:hover {
                    cursor: pointer;
                    background: #F0F5FF;

                    .label,
                    .scoreVlaue {
                        color: $themeColor;
                    }
                }
            }

            &>.scoreItem:nth-child(5) {
                margin-right: 0;
            }
        }
    }

    .contentBox {
        width: 100%;
        padding: 20px;

        .title {
            font-size: 12px;
            color: $textColor3;
            margin-bottom: 10px;

            .sub {
                margin-left: 20px;
                color: $textColor6;
            }
        }
    }
}
</style>